<template>
  <!--贺向阳 商品促销-->
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 20px">商品促销</el-breadcrumb-item>
    </el-breadcrumb>


    <el-row style="position: relative;top: 20px;left: 120px">
      <el-col :span="2">

        <el-dropdown trigger="click" style="position: relative;top: 8px" @command="AuditMethod">

              <span class="el-dropdown-link">
                审核状态<i class="el-icon-arrow-down el-icon--right"></i>
              </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
            <el-dropdown-item command="审核失败">审核失败</el-dropdown-item>
            <el-dropdown-item command="审核成功">审核成功</el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>


      </el-col>
      <el-col :span="2">

        <el-dropdown trigger="click" style="position: relative;top: 8px;left: 5px" @command="PromotionMethod">

              <span class="el-dropdown-link">
                促销状态<i class="el-icon-arrow-down el-icon--right"  style="position: relative;left: 10px"></i>
              </span>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="待促销">待促销</el-dropdown-item>
            <el-dropdown-item command="促销中">促销中</el-dropdown-item>
            <el-dropdown-item command="已结束">已结束</el-dropdown-item>
          </el-dropdown-menu>

        </el-dropdown>

      </el-col>

      <el-col :span="4">
        <el-input  placeholder="请输入促销编码" v-model="input" clearable style="width: 200px ;position: relative;left: 10px"></el-input>
      </el-col>

      <el-col :span="2">
        <el-button icon="el-icon-search" circle @click="searchMethod" style="position: relative;left: 10px"></el-button>
      </el-col>

      <el-col :span="2" :offset="6">
        <el-button  @click="OutMethod">导出</el-button>
      </el-col>

      <el-col :span="2">
        <router-link :to="{name:'增加商品促销', params: {order:'新增'}}"><el-button type="primary">新增</el-button></router-link>
      </el-col>

    </el-row>

    <!--表格部分-->
    <el-row style="position: relative;top:60px">
      <el-table
        border
        style="width: 100%"
        :header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#606266'}"
        :cell-style="{'text-align':'center'}"
        :data="tableData"
        highlight-current-row
      >
        <el-table-column
          v-if="false"
          property="id"
          label="促销单id"
          width="120">
        </el-table-column>
        <el-table-column
          property="date"
          label="促销编码"
          width="120">
        </el-table-column>
        <el-table-column
          property="name"
          label="促销门店"
          width="120">
        </el-table-column>
        <el-table-column
          property="address"
          label="促销日期">
        </el-table-column>
        <el-table-column
          property="address"
          label="制单人员">
        </el-table-column>
        <el-table-column
          property="address"
          label="审核日期">
        </el-table-column>
        <el-table-column
          property="address"
          label="审核状态">
        </el-table-column>
        <el-table-column
          property="address"
          label="促销状态">
        </el-table-column>
        <!--最后的 详情 修改 审核 删除  -->
        <el-table-column header-align="center" label="操作" >

          <!--列表内容-->
          <template slot-scope="scope" >
            <el-dropdown @command="handleCommand($event,scope.row)" placement="bottom">
              <span class="el-dropdown-link">
                <i  slot="reference" class="el-icon-more-outline"></i>
              </span>
              <el-dropdown-menu slot="dropdown" style="text-align: center" >

                <el-dropdown-item command="详情">详情</el-dropdown-item>

                <el-dropdown-item command="修改">修改</el-dropdown-item>

                <el-dropdown-item command="审核">审核</el-dropdown-item>

                <el-dropdown-item command="删除">删除</el-dropdown-item>

              </el-dropdown-menu>

            </el-dropdown>

          </template>

        </el-table-column>


        <!--表格最后一行 -->

      </el-table>



    </el-row>

    <!--分页-->

    <el-row>

      <div class="block" style="text-align: center; position: relative;top: 66px;">

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout=" jumper,prev,pager,next,sizes,total"
          :total="totalCount">
        </el-pagination>
      </div>

    </el-row>


  </div>
</template>

<script>
  import ElSelectDropdown from "_element-ui@2.15.0@element-ui/packages/select/src/select-dropdown";
  export default {
    name: "GoodsPromotion",
    data() {
      return {
        input: '4',//input输入框的值
        date: "",//选中行的数据
        // 总数据
        tableData:[
          //表格数据，之后后端获得，删了
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
          {
            date: '2016-05-09',
            name: '王小虎6',
            address: '上海市普陀区金沙江路 1517 弄'
          },



        ],



        // 默认显示第几页
        currentPage:1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount:1,
        // 个数选择器（可修改）
        pageSizes:[2,3,5,10,20,50,100],
        // 默认每页显示的条数（可修改）
        PageSize:2,
        //模态框默认不可视
        dialogVisible: false,
      }
    },
    methods: {
      //1 审核状态的方法
      AuditMethod(command) {
        this.$message({
          message:'这是审核状态 ' + command,
          type: 'warning'//success   error
        });
      },
      //2 促销状态的方法
      PromotionMethod(command) {
        this.$message({
          message:'这是促销状态 ' + command,
          type: 'warning'
        });
      },
      //3 搜索的方法，根据促销编码模糊搜索
      searchMethod(){
        alert("你好啊，这是搜索方法")
      },
      //4 导出的方法
      OutMethod(){
        alert("你好啊，这是导出方法")
      },
      //5分页方法
      // 将页码，及每页显示的条数以参数传递提交给后台
      getData(n1,n2){
        /* alert(n1);alert(n2);*/
        let datas=new FormData();
        datas.append("limit",n1);
        datas.append("pageNum",n2);
        /*   datas.append("sort","create_time");
           datas.append("sortOrder","desc");*/

        // 这里使用axios，使用时请提前引入
        /* axios.post("address/page",
           datas
         ).then(res=>{

           // 将数据赋值给tableData
           /!*  this.tableData=data.data.body*!/
           this.tableData = res.data.rows;
           // 将数据的长度赋值给totalCount
           this.totalCount = res.data.total;

         })*/
      },
      // 分页
      // 每页显示的条数
      handleSizeChange(val) {
        // 改变每页显示的条数
        this.PageSize=val;
        // 点击每页显示的条数时，显示第一页
        this.getData(val,1);
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.currentPage=1
      },
      // 显示第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.currentPage=val;
        /*   alert(val);*/
        /*  alert(this.PageSize);*/
        // 切换页码时，要获取每页显示的条数
        this.getData(this.PageSize,val)
      },
      //页面加载了显示表格分页数据
      created:function(){
        this.getData(this.PageSize,this.currentPage)
      },
      //6 详情 修改 审核  删除
      handleCommand(order,row){


        if(order==="删除"){
          alert("进入删除操作");

          后端发送axios请求删除此条ID的促销单

          //删除这一行表格数据 (重新获取表格数据展示)

        }else{

          alert("详情，修改，审核操作");
          //带着 order数据 和 这一行的表格数据，去新的页面 /promotion/AddPromotion2
          /*location.href="";*/
          this.$router.push({name:"增加商品促销",params:{order:order,row:row}});

        }


      },


    }

  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
